<template>
  <div class="news">
    <van-sticky>
      <van-nav-bar
          title="我的试卷列表"
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="collect-bg">
      <h2>我的试卷</h2>
    </div>
    <div v-for="ele in list">
      <ul class="news-detail-item" :key="ele._id">
        <li class="left">
          <h2>试卷名称：{{ ele.title }}</h2>
          <p>答对题数：{{ele.correctCount}}</p>
          <p>总题目数：{{ele.totalCount}}</p>
          <p>答对率：{{ (ele.correctPercent *100).toFixed(2) + '%' }}</p>
          <p><i class="fa fa-calendar" aria-hidden="true"></i> {{ formatTime(ele.createTime) }}</p>
        </li>
        <li class="right">
          <van-button type="primary"  @click="showDetail(ele)">查看详情</van-button>&nbsp;&nbsp;
        </li>
      </ul>
    </div>
    <van-empty description="暂无相关信息！！！" v-if="list.length == 0"/>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,toRefs} from "vue";
import {formatTime} from "../utils/date";
import {useRouter} from "vue-router";
import {personPageByUid} from '../api/page'
const state = reactive({
  list:[],
  uid:'' as any
})
let {list,uid} = toRefs(state)
uid.value = localStorage.getItem('id')
const router = useRouter()
const onClickLeft =()=>{
  router.back()
}
const getPages = async (uid)=>{
  let response = await personPageByUid(uid)
  //console.log(response)
  list.value = response.data.answerList
}
const showDetail = (ele) =>{
  router.push('/show/examinfo/'+ele.answerId)
}
getPages(uid)
</script>

<style scoped lang="less">
.news {
  margin-bottom: 1.5rem;
}
.collect-bg {
  width: 100%;
  height: 1.5rem;
  background: #EECDA3;
  background: -webkit-linear-gradient(to left, #EF629F, #EECDA3);
  background: linear-gradient(to left, #EF629F, #EECDA3);
  > h2 {
    font-size: 28px;
    color: #fff;
    line-height: 1.5rem;
    padding-left: 0.2rem;
  }
}
.news-detail-item {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
  padding: 0.3rem;
  justify-content: space-between;
  .left {
    margin-right: 0.6rem;
    > h2 {
      -webkit-box-sizing: border-box;
      font-size: .42rem;
      line-height: 1.2;
      color: #1a1a1a;
      font-weight: normal;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    > p {
      padding: 0.1rem 0;
      font-size: 0.24rem;
      color: #949494;
    }
  }
  .right {
    >.van-button{
      &:first-child{
        margin-right: 0.1rem;
      }
    }
    img {
      width: 2rem;
      height: auto;
    }
  }
}
</style>
